<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>满天星</title>
		<style>
		
		</style>
	</head>
	<body>
		<input type="button" value="游戏开始" onclick="init()" />
		<input type="button" value="游戏暂停" onclick="initstop()" />
		<span>目前星星个数:</span><span id= "cont" ></span>
			<span>时间:</span><span id= "fen"></span>
		<script type="text/javascript" src="js/jquery-3.1.1.js" ></script>
		<script> 
			var starnum = 0;
			var fen = 0;
			function init(){
								// 获取窗口宽度
				if (window.innerWidth)
				winWidth = window.innerWidth;
				else if ((document.body) && (document.body.clientWidth))
				winWidth = document.body.clientWidth;
				// 获取窗口高度
				if (window.innerHeight)
				winHeight = window.innerHeight;
				else if ((document.body) && (document.body.clientHeight))
				winHeight = document.body.clientHeight;
				// 通过深入 Document 内部对 body 进行检测，获取窗口大小
				if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
				{
				winHeight = document.documentElement.clientHeight;
				winWidth = document.documentElement.clientWidth;
				}
				
				
				s2= setInterval("shijian()",1000)
				s1 = setInterval("newstar()",400)
			}
			function initstop(){
				clearInterval(s1);
				clearInterval(s2);
			}
		function newstar(){
			
		    var star = document.createElement("img");
		    star.src = "img/big2.png";
//		    获取鼠标点击的x,y坐标
//		    var x = evt.clientX;
//		    var y = evt.clientY;
//			自动生成气球x,y坐标
			var x = Math.floor(Math.random()*(winWidth-100+1));
			var y = Math.floor(Math.random()*(winHeight-100+1));
		    star.style.position = "absolute";
		    //气球生成位置
		    star.style.left = x+"px";
		    star.style.top =  y+"px";
		    
		    //控制气球大小;
		    var w = Math.floor(Math.random()*65+15);
		    star.style.width = w+"px"
		     star.style.width = (w+60)+"px"
		   
		    starnum ++ ;
		    var bu = document.body;
		    bu.appendChild(star);
		    star.onclick = del;
		    document.getElementById("cont").innerHTML = starnum;
		     document.getElementById("fen").innerHTML = fen;
		    if(starnum==20){
		    	alert("游戏结束,本次游戏你一共坚持了"+fen+"秒");
		    	location.reload() 
		    }
		    
		}
		function del(){
			var parents = document.body;
			var son = this;
			parents.removeChild(son);
			 starnum -- ;			
		}
		function shijian(){
			fen++
		}
	
		</script>
	</body>
</html>
